<template>
    <div style="width: 70%">
        <div style="margin-bottom: 30px">新增旅游景点</div>
        <el-form :inline="true" :model="form" label-width="120px">
            <el-form-item label="名称" prop="name" >
                <el-input v-model="form.name" placeholder="请输入景点名称"></el-input>
            </el-form-item>
            <el-form-item label="简介"  prop="remark">
                <el-input v-model="form.introduce" placeholder="请输入简介"></el-input>
            </el-form-item>
          <el-form-item label="正文"  prop="body"  >
            <el-input     style="width: 1000px" type="textarea"  autosize  v-model="form.body" placeholder="请输入正文"></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="photo">
            <el-upload
                class="avatar-uploader"
                :action="'http://localhost:9090/api/file/upload?token=' + this.admin.token"
                :show-file-list="false"
                :on-success="handleCoverSuccess"
                :on-change="onChange"
            >
              <img v-if="form.photo" :src="form.photo " class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div style="text-align: center  ;margin-top:5px ">
            <el-button type="primary" @click="save" size="medium">提交</el-button>
            <el-button type="info" @click="$router.push('/TravelBackground')" size="medium">返回</el-button>
        </div>
    </div>
</template>

<script>
    import request from "@/util/request";
    import Cookies from "js-cookie";
    export default {
        name: "AddTravel",
        data(){
            return{
              admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
              form:{
                photo:''
              },
            }
        },

        methods:{
          onChange (file) {
            if(file){
              const suffix = file.name.split('.')[1]
              const size = file.size / 1024 / 1024 < 2
              if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                this.$refs.upload.clearFiles()
                return false
              }
              if(!size){
                this.$message.error('上传文件大小不能超过 2MB!')
                return false
              }
              return file
            }
          },
          handleCoverSuccess(res) {
            if (res.code === '200') {
              console.log(res.data)
              // this.$set(this.form, 'cover', res.data)
              this.form.photo = res.data
            }
          },
            save(){
                request.post("/travel/insert",this.form).then(res=>{
                    if (res.code=="200"){
                        this.$notify.success("新增成功")
                      console.log(this.form)
                        this.$router.push("/TravelBackground")
                    }else{
                        this.$notify.error(res.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
